<template>
    <l-layout class="l-tab-page" :left="208" v-if="!lr_loadPage" >
        <template #left>
            <l-panel style="padding-right:0;" class="l-panel-overflow">
                <template #title>
                    {{$t('数据库')}}
                    <div class="tree-setting-btn" >
                        <el-tooltip effect="dark" :content="$t('数据库管理')" placement="top">
                        <el-button @click="handleSettingClick" type="text" icon="el-icon-setting"></el-button>
                        </el-tooltip>
                    </div>
                </template>
                <el-tree class="learun-tree" v-loading="treeLoading" :data="lr_dblinkTree" :default-expand-all="true"  @node-click="handleNodeClick">
                    <span class="lr-tree-node"  slot-scope="{ node, data }">
                        <i v-if="data.icon" :class="data.icon"></i>
                        {{ $t(node.label) }}
                    </span>
                </el-tree>
            </l-panel>
        </template>
        <l-panel style="padding-left:0;" >
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('please enter query keyword')"  @keyup.enter.native="hanleSearch" v-model="searchWord" size="mini" >
                        <el-button @click="hanleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns :hasAdd="false" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                row-key="name" 
                :isExpand="true" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="searchTableData || tableData" 
                :loading="tableLoading"
                
                @expandChange="expandChange"

                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"

                @loadPageData="turnTablePage"
                
                >
                <template v-slot:table_expand="scope">
                    <l-table :loading="scope.row.loading" :isChild="true" :columns="childColumns" :dataSource="scope.row.columns" >
                        <template v-slot:isPrimarykey="scope" >
                            <el-switch
                                v-model="scope.row.isPrimarykey"
                                disabled
                                >
                            </el-switch>
                        </template>
                        <template v-slot:isIdentity="scope" >
                            <el-switch
                                v-model="scope.row.isIdentity"
                                disabled
                                >
                            </el-switch>
                        </template>
                        <template v-slot:isNullable="scope" >
                            <el-switch
                                v-model="scope.row.isNullable"
                                disabled
                                >
                            </el-switch>
                        </template>

                        
                    </l-table>
                </template>
                <l-table-btns :btns="tableBtns" :isFixed="false" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <!--数据库管理-->
        <l-drawer
            :title="$t('数据库管理')"
            :visible.sync="dbManagerVisible"
            :showOk="false"
            :showClose="false"
            size="800px"
            >
            <dblink-index></dblink-index>
        </l-drawer>

        <l-drawer 
            :title="`${$t('查看表数据')}-${tableName}`"
            :visible.sync="formVisible"
            :showOk="false"
            :showClose="false"
            :width="800"

            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" :dbcode="dbCode" :tableName="tableName" ></my-form>
        </l-drawer>
    </l-layout>
</template>

<script>
const api = window.$api.data.dbTable
import MyForm from './form'
import DblinkIndex from '../dblink/index'

export default {
    components: {
        MyForm,
        DblinkIndex
    },
    data () {
        return {
            lr_isPage:true,

            treeLoading:false,
            //query
            searchWord:'',
            searchTableData:null,

            tableLoading:false,
            tableData:[],
            columns: [
                {label:'表名',prop:'name',minWidth:'200'},
                {label:'说明',prop:'description',minWidth:'200'}
            ],
            childColumns:[
                {label:'字段名',prop:'dbColumnName',minWidth:'100'},
                {label:'类型',prop:'dataType',width:'100'},
                {label:'长度',prop:'length',width:'64',align:'center'},
                {label:'主键',prop:'isPrimarykey',width:'64',align:'center'},
                {label:'允许为空',prop:'isNullable',width:'80',align:'center'},
                {label:'自增',prop:'isIdentity',width:'64',align:'center'},
                {label:'说明',prop:'columnDescription',minWidth:'100'}
            ],
            tableBtns:[
                {prop:'LookData',label:'查看',width: 60}
            ],
            tableTotal:0,
            tablePageSize:50,
            tableCurrentPage:1,

            dbCode:'0',
            formVisible:false,
            tableName:'',

            dbManagerVisible:false,
        }
    },
    mounted () {
        this.initDbLink()
    },
    computed:{
    },
    methods:{
        async initDbLink(){
            this.treeLoading = true
            await this.lr_loadDblink(false)
            this.treeLoading = false
        },

        handleSettingClick(){
            this.dbManagerVisible = true
        },

        hanleSearch(){
            this.tableCurrentPage = 1
            this.loadTablePageData()
        },
        handleNodeClick(data) {
            if(!data.children){
                 this.dbCode = data.id
                 this.searchWord = ''
                 this.loadTableData()
            }
        },
        loadTableData(){
            this.tableLoading = true
            this.tableCurrentPage = 1
            api.getList(this.dbCode).then(res => {
                this.tableData = res.data.data || []
                this.searchTableData = this.$pagination(this.tableCurrentPage,this.tablePageSize,this.tableData)
                this.tableTotal =this.tableData.length
                this.tableLoading = false
            }).catch(()=>{
                this.tableData = []
                this.tableTotal = 0
                this.tableLoading = false
            })
        },
        loadTablePageData(){
            let list = []
            if(this.searchWord){
                list = this.tableData.filter(item => item.name.indexOf(this.searchWord) >-1 || (item.coment && item.coment.indexOf(this.searchWord)>-1));
            }
            else{
                list = this.tableData
            }
            this.tableTotal = list.length
            this.searchTableData = this.$pagination(this.tableCurrentPage,this.tablePageSize,list)
        },

        turnTablePage({rows}){
            this.tablePageSize = rows
            this.loadTablePageData()
        },

        handleLookData($index,row){
            this.formVisible = true
            this.tableName = row.name
        },
        async handleOpenedForm(showLoading,hideLoading){
            showLoading('Loading...')
            await this.$refs.form.init()
            hideLoading()
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        async expandChange({row,expanded}){
            // 数据展开
            if(expanded && !row.columns && !row.loading){
                // 表示展开，开始加载数据
                this.$set(row,'loading',true)
                const columns = await this.$awaitWraper(api.getColumns(this.dbCode,row.name))
                this.$set(row,'columns',columns)
                this.$set(row,'loading',false)
            }
        }
    }

}
</script>
